<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>暖心提醒</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .container {
            width: 100%;
            max-width: 400px;
            text-align: center;
        }
        
        .title {
            color: white;
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 30px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        
        .tip-box {
            background: white;
            border-radius: 20px;
            padding: 30px;
            margin: 20px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .tip-text {
            font-size: 24px;
            color: #333;
            line-height: 1.4;
        }
        
        .btn {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 18px;
            border-radius: 25px;
            margin: 10px;
            cursor: pointer;
            width: 200px;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .btn-stop {
            background: #f44336;
        }
        
        .counter {
            color: white;
            font-size: 16px;
            margin: 20px 0;
        }
        
        .floating-tip {
            position: fixed;
            background: white;
            border-radius: 15px;
            padding: 15px 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
            font-size: 18px;
            z-index: 1000;
            max-width: 200px;
            text-align: center;
            animation: floatIn 0.5s ease-out;
            border: 2px solid rgba(255,255,255,0.5);
        }
        
        @keyframes floatIn {
            from {
                opacity: 0;
                transform: translateY(-20px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">暖心提醒</div>
        
        <div class="tip-box">
            <div class="tip-text" id="currentTip">加载中...</div>
        </div>
        
        <button class="btn" onclick="showNewTip()">换一条</button>
        <button class="btn btn-stop" onclick="toggleAutoMode()" id="autoBtn">停止自动</button>
        
        <div class="counter">
            已显示 <span id="tipCount">0</span> 条提醒
        </div>
    </div>

    <script>
        // 温馨提示数据
        var tips = [
            '记得多喝水哦 💧', '保持微笑 😊', '每天都要元气满满 🌟',
            '记得吃水果 🍎', '保持好心情 🌈', '好好爱自己 ❤️',
            '我想你了 💕', '梦想成真 ✨', '期待下一次见面 🌸',
            '一切顺利 🍀', '早点休息 🌙', '烦恼都消失 💫',
            '别熬夜哦 ⏰', '今天也要开心 🎈', '天冷多穿衣服 🧥',
            '按时吃饭 🍚', '累了就休息 🛋️', '你是最棒的 👍',
            '保持乐观 😄', '保护眼睛 👀', '记得运动 🏃',
            '深呼吸放松 🌬️', '今天加油 💪', '一切都会好的 🌈',
            '保持耐心 ⏳', '珍惜当下 🌟', '感恩生活 🙏'
        ];
        
        var colors = [
            '#FFB6C1', '#87CEEB', '#98FB98', '#E6E6FA',
            '#FFFACD', '#DDA0DD', '#FFA07A', '#F0E68C',
            '#E0FFFF', '#D8BFD8', '#F5DEB3', '#90EE90'
        ];
        
        var tipCount = 0;
        var autoMode = true;
        var autoInterval = null;
        var floatingTips = [];
        
        // 页面加载完成后启动
        window.onload = function() {
            setTimeout(startAutoMode, 1000);
        };
        
        function showNewTip() {
            var randomTip = tips[Math.floor(Math.random() * tips.length)];
            var randomColor = colors[Math.floor(Math.random() * colors.length)];
            
            document.getElementById('currentTip').textContent = randomTip;
            document.querySelector('.tip-box').style.backgroundColor = randomColor;
            
            tipCount++;
            document.getElementById('tipCount').textContent = tipCount;
        }
        
        function showFloatingTip() {
            var randomTip = tips[Math.floor(Math.random() * tips.length)];
            var randomColor = colors[Math.floor(Math.random() * colors.length)];
            
            var tipElement = document.createElement('div');
            tipElement.className = 'floating-tip';
            tipElement.textContent = randomTip;
            tipElement.style.backgroundColor = randomColor;
            
            // 随机位置
            var x = Math.random() * (window.innerWidth - 200);
            var y = Math.random() * (window.innerHeight - 100);
            tipElement.style.left = x + 'px';
            tipElement.style.top = y + 'px';
            
            document.body.appendChild(tipElement);
            floatingTips.push(tipElement);
            
            // 2-4秒后消失
            setTimeout(function() {
                if (tipElement.parentNode) {
                    tipElement.parentNode.removeChild(tipElement);
                }
            }, 2000 + Math.random() * 2000);
        }
        
        function startAutoMode() {
            autoMode = true;
            document.getElementById('autoBtn').textContent = '停止自动';
            
            // 立即显示一条
            showNewTip();
            
            // 设置定时器
            autoInterval = setInterval(function() {
                if (!autoMode) return;
                
                showNewTip();
                
                // 显示浮动提示
                for (var i = 0; i < 2; i++) {
                    setTimeout(showFloatingTip, i * 500);
                }
            }, 3000);
        }
        
        function toggleAutoMode() {
            if (autoMode) {
                autoMode = false;
                document.getElementById('autoBtn').textContent = '开始自动';
                if (autoInterval) {
                    clearInterval(autoInterval);
                }
                
                // 清除所有浮动提示
                floatingTips.forEach(function(tip) {
                    if (tip.parentNode) {
                        tip.parentNode.removeChild(tip);
                    }
                });
                floatingTips = [];
            } else {
                startAutoMode();
            }
        }
        
        // 防止iOS缩放
        document.addEventListener('touchstart', function(event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        });
        
        var lastTouchEnd = 0;
        document.addEventListener('touchend', function(event) {
            var now = Date.now();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    </script>
</body>
</html>